<template>
  <div>

    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label=" 姓名：">
            <el-input v-model="param.adminName" placeholder="请输入姓名" @change="findAccountByCondition"></el-input>
          </el-form-item>
          <el-form-item label=" 手机号：">
            <el-input v-model="param.adminPhone" placeholder="请输入手机号" @change="findAccountByCondition"></el-input>
          </el-form-item>
          <el-form-item label="请选择管理员权限:">
            <el-select v-model="param.adminRoleId" placeholder="请选择" clearable @change="findAccountByCondition">
                <el-option v-for="adminRole in options" :key="adminRole.adminRoleId"
                  :label="adminRole.adminRoleName" :value="adminRole.adminRoleId">
                </el-option>
<!--              <el-option :key="1" label="超级管理员" :value="1"></el-option>
              <el-option :key="2" label="普通管理员" :value="2"></el-option>
              <el-option :key="3" label="客服" :value="3"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="请选择管理员状态:">
            <el-select v-model="param.adminState" placeholder="请选择" clearable @change="findAccountByCondition">
              <el-option :key="0" label="正常" :value="0"></el-option>
              <el-option :key="1" label="不可用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showAddAdminWindow">新增管理员</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="openAdminRoleWindow()">查看管理员权限总表</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
    <el-col :span="20" :offset="4">
        <el-table :data="page.records" style="width: 80%">
          <!-- <el-table-column label="头像" width="180" align="center" label-align="center">
            <template slot-scope="scope">
                    <el-image style="width: 30px; height: 30px" :src="scope.row.bookImage" :preview-src-list="[scope.row.bookImage]">
                              <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                              </div>
                            </el-image>
            </template>
          </el-table-column> -->
          <el-table-column prop="adminName" label="姓名" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="adminPhone" label="手机号" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="adminRoleName" label="角色" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column label="状态" width="180" align="center" label-align="center">
            <template slot-scope="scope">{{ getAdminStateText(scope.row.adminState)}}</template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button  @click="deleteAdmin(scope.row)" type="text">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--分页-->
    <el-pagination @size-change=" handleSizeChange" @current-change="handleCurrentChange" :current-page="param.current"
      :page-sizes="[5, 8, 10]" :page-size="param.size" layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>


    <!--新增窗口-->
    <el-dialog title="新增管理员" :visible.sync="addAdminWindow">
      <el-form :model="account">

        <el-form-item label="姓名:">
          <el-input v-model="account.adminName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="account.adminPhone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input type="password" v-model="account.adminPass" placeholder="请输入密码" show-password></el-input>
        </el-form-item >
          <el-form-item label="管理员权限:">
           <el-select v-model="account.adminRoleId" placeholder="请选择新增管理员权限">
            <el-option v-for="adminRole in options1" :key="adminRole.adminRoleId"
              :label="adminRole.adminRoleName" :value="adminRole.adminRoleId">
            </el-option>
          </el-select>
          </el-form-item >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addAdminWindow = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>

<el-dialog title="管理员权限总览" :visible.sync="adminRoleWindow">
<el-button type="primary" @click="addAdminRole()">新增权限类型</el-button>
  <el-row>
        <el-col :span="20" :offset="3">
  <el-table :data="adminRoles" stripe width="600px">
    <el-table-column prop="adminRoleId" label="权限编号" width="100px" align="center" label-align="center">
    </el-table-column>
    <el-table-column prop="adminRoleName" label="权限名称" width="150px" align="center" label-align="center">
    </el-table-column>
    <el-table-column label="操作" width="200px" align="center" label-align="center">
      <template slot-scope="scope">
        <el-button @click="openChangeAdminRoleNameWindow(scope.row)" type="text">修改名称</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-col>
</el-row>
<el-dialog
      width="60%"
      title="新增权限类型窗口"
      :visible.sync="addAdminRoleWindow"
      append-to-body>
<el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label=" 新增管理员权限名称：">
            <el-input v-model="addAdminRoleName" placeholder="请输入名称" ></el-input>
          </el-form-item>
          </el-form>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addAdminRoleWindow = false">取 消</el-button>
      <el-button type="primary" @click="sureAddAdminRole()">确 定</el-button>
    </div>
    </el-dialog>


<el-dialog
      width="60%"
      title="修改权限名称窗口"
      :visible.sync="changeAdminRoleNameWindow"
      append-to-body>
<el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label=" 修改管理员权限名称：">
            <el-input v-model="changeRoleName" placeholder="请输入名称" ></el-input>
          </el-form-item>
          <el-form-item v-if="false">
            <span v-model="adminRoleId"></span>
          </el-form-item>
          </el-form>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="changeAdminRoleNameWindow = false">取 消</el-button>
      <el-button type="primary" @click="changAdminRoleName()">确 定</el-button>
    </div>
    </el-dialog>


<div slot="footer" class="dialog-footer">
      <el-button @click="adminRoleWindow = false">关 闭</el-button>
    </div>

</el-dialog>



  </div>

</template>

<script>
  export default {
    name: "AdminAccount",
    data() {
      return {
        param: {//页面参数
          pageNum: 1,
          pageSize: 5,
          adminName: "",//管理员姓名
          adminPhone: "",//管理员电话
          adminState: "",//管理员状态
          adminRoleId: "",//管理员角色
        },
        page: {},//页面
        updateStateForm: {},//修改状态参数
        addAdminWindow: false,//新增管理员窗口
        account: {//新增管理员参数
          adminName: "",//管理员姓名
          adminPhone: "",//管理员电话
          adminPass: "",//管理员密码
        },
        headers: {},
        adminId:"",
        options:[],//管理员权限筛选
        options1:[],//新增管理员权限展示
        adminRoles:[],
        adminRoleWindow:false,
        addAdminRoleWindow:false,
        addAdminRoleName:null,
        changeAdminRoleNameWindow:false,
        changeRoleName:null,
        adminRoleId:null,
      }

    },

    methods: {
      //打开管理员新增窗口
      showAddAdminWindow() {
        // 清空account对象的值
        this.account = {
          adminName: '',
          adminPhone: '',
          adminPass: ''
        };
        this.addAdminWindow = true;
      },


      //新增
      addAdmin() {
        this.$http.post("person/adminInfo/addAdmin.api", this.account).then(resp => {
          if (resp.data.code == "200") {
            this.SuccessTip(resp.data);
            this.addAdminWindow = false;
            this.account = {
              adminName: "",
              adminPhone: "",
              adminPass: ""
            };
            this.loadData();
          } else {
           this.ErrorTip(resp.data)
            this.account = {
              adminName: "",
              adminPhone: "",
              adminPass: ""
            };
          }
        })
      },
//删除管理员
      deleteAdmin(row) {
        this.adminId = JSON.parse(JSON.stringify(row)).adminId
      this.$http.get("/person/adminInfo/deleteAdmin.api",
      {
        params:{
          adminId:this.adminId
        }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadData()
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //查所有管理员
      loadData() {
        this.$http.post("/person/adminInfo/allAdmins.api", this.param).then(resp => {
          if (resp.data.code == 200) {
            this.page = resp.data.data
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //搜索管理员
      findAccountByCondition() {
        this.param.pageNum = 1;
        this.loadData();
      },
      //改变页码大小
      handleSizeChange(pageSize) {
        this.param.pageSize = pageSize;
        this.loadData();
      },
      //该变页数
      handleCurrentChange(pageNum) {
        this.param.pageNum = pageNum;
        this.loadData();
      },
      //状态
      getAdminStateText(adminState) {
        switch (adminState) {
          case 0:
            return '正常';
          case 1:
            return '禁用';
          case 2:
            return '删除';
          default:
            return '未知状态';
        }
      },
      SuccessTip(data) { //成功
        if (data.code === 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
      },
      ErrorTip(data) { //失败
        if (data.code !== 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'error'
          });
        }
      },
      adminRoleList(){
        this.$http.get("/person/adminRole/adminRoleList.api").then(resp=>{
         if(resp.data.code==200){
           this.options=resp.data.data
           this.options1=resp.data.data
           this.adminRoles=resp.data.data
         }
        })
      },
      openAdminRoleWindow(){
        this.adminRoleWindow=true
        this.adminRoleList()
      },
      addAdminRole(){
        this.addAdminRoleWindow=true
        this.addAdminRoleName=null
      },
      openChangeAdminRoleNameWindow(adminRole){
        this.changeAdminRoleNameWindow=true
        this.changeRoleName=null;
        this.adminRoleId=adminRole.adminRoleId
},
      changAdminRoleName(){
       this.$http.get("/person/adminRole/changeAdminRoleName.api",{params:{adminRoleId:this.adminRoleId,adminRoleName:this.changeRoleName}}).then(resp=>{
         if(resp.data.code==200){
           this.$message({
             message: resp.data.msg,
             type: 'success'
           });
           this.changeAdminRoleNameWindow=false
           this.adminRoleList()
         }else{
           this.$message({
             message: resp.data.msg,
             type: 'error'
           });
         }
       })
      },
      sureAddAdminRole(){
        this.$http.get("/person/adminRole/addAdminRole.api",{params:{adminRoleName:this.addAdminRoleName}}).then(resp=>{
          if(resp.data.code=200){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
          this.addAdminRoleWindow=false
          this.adminRoleList()
          }else{
            this.$message({
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      }
    },
    created() {
      this.loadData();
      this.adminRoleList();
      this.headers["token"] = localStorage.getItem("token");
    }
  }
</script>

<style>
</style>
